<template>  
    <div class="phone">
        <div class="topbar">
            <div class="list">
                <span></span>
                <span class="duan"></span>
                <span></span>
            </div>
            <div class="import">
                <input type="button" class="btn" @click='search'>
                <input type="search" class="text" placeholder="搜索" ref='in' @keyup='keyrun'>
            </div> 
        </div>
        <swiper :options="swiperOption" class="swiperlist">
            <swiper-slide v-for="(item,index) in playList" :key='index'><img v-lazy="item.img" lazy="loading" alt=""></swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>           
        </swiper>
        <div class="goodslist">
            <div class="zhanwei" v-if='goodslist.length==0'>暂无数据</div>
            <mu-flexbox wrap='wrap' justify="space-around" :gutter="0" v-if='goodslist.length!=0'>
                <mu-flexbox-item class="flex-demo" basis="40%" v-for='(item,index) in goodslist' :key='index'>
                    <router-link  :to="{name:'particulars',params:{cid:item.id,name:item.name}}">
                        <img v-lazy="item.img" lazy="loading" alt="">
                    </router-link>
                    <h5>{{item.name}}</h5>
                    <p>{{item.nowPrice}}</p>
                </mu-flexbox-item>
            </mu-flexbox>
        </div>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import api from '../api/api.js'
    import pinyin from '../assets/js/pinyin.js'
    export default {
        data(){
            return{
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationClickable: true, //点击完后可以继续滑动
                    autoplay:3000,
                    loop : true, //循环
                    autoplayDisableOnInteraction:false
                },
                playList:[],
                goodslist:[],
                value:'',
                id:"123"
            }
        },
        components:{
            swiper,
            swiperSlide
        },
        created(){
            // this.$http.get(api.getphonedetails(24217)).then((res)=>{
            //     console.log(res)
            // })
            // this.$http.get(api.getphonesearch(pinyin("联想"))).then((res)=>{
            //     console.log(res.data.showapi_res_body.phonePagebean)
            // })
            // .catch((err)=>{
            //     console.log(err)
            // })
            this.$http.get(api.getphonenews()).then((res)=>{
                this.playList=res.data.showapi_res_body.newsList
            }).catch((err)=>{
                console.log(err)
            })
            this.$http.get(api.getphonesearch("")).then((res)=>{
                this.goodslist=res.data.showapi_res_body.phonePagebean.contentlist
            }).catch((err)=>{
                console.log('报错了')
            })
        },
        methods:{
            keyrun(){
                this.value=this.$refs.in.value
            },
            search(){
                this.$router.push({ name: 'showpage', params: { cid:this.id,keyword:this.value},query:{word:this.value}})
            }
        }
    }
</script>


<style lang="less" scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .topbar{
        overflow: hidden;
        padding-bottom: 5px;
        .list{
            padding: 10px 5px;
            margin-left: 10px;
            height: 40px;
            width: 12%;
            float: left;
            span{
                height: 2px;
                width: 100%;
                background-color: #009688;
                display: block;
                border-radius:2px;
            }
            .duan{
                margin: 10px 0;
                width: 70%;
            }
        }
        .import{
            float: left;
            border-radius: 15px;
            margin: 5px 0 0 15px;
            width: 80%;
            background-color: #efefef;
            padding: 5px;
            .btn{
                // padding-left: 20px;
                background: url("../assets/images/search.png") no-repeat;
                height: 22px;
                width: 22px;
                background-size: cover;
                margin-left:5px;
            }
            .text{
                width: 80%;
                margin-left: 10px;
                color: #009688;
            }
            input{
                border: none;     
                background-color: #efefef;
                vertical-align: middle;    
            }
            input:focus{
                outline: none;
                
            }
        }
    }
    .swiperlist{
        background-color: #f5f5f5;
    }
    .swiper-slide{
        img{
        width: 100%;
        height: 7rem;
        // background-size: cover;
        }
    }
    img[lazy=loading] {
        background: url('../assets/images/lazy.png') no-repeat;
        background-size: cover;
    }
    .goodslist{
    .flex-demo{
        padding:10px;
        
        img{
            min-height: 7.2rem;
            min-width: 7.2rem;
            height: 7.2rem;
            // height: auto;
            max-width: 100%;
            width: 100%;
        }
    }
    h5{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        height: 0.8rem;
        -webkit-box-orient: vertical;
        text-align:justify;
        background-color:#fff;
    }
    p{
        color: #009688;
        background-color:#fff;
    }
}
</style>

